import React from 'react'
import { NavBarModule } from '../NavBarModule'
import { Flex } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import './index.scss'
export const NavBarRanking = props => {
    const navigate = useNavigate()
    function goBack(){
        navigate(-1)
    }
    const navbarInsert =(
        <Flex justify='between' align='center' className='navbar_ranking'>
            <Flex className='navbar_ranking_left'>
                <span className='iconfont icon-zuojiantou' onClick={()=>goBack()}/>
                <span>歌单</span>
            </Flex>
            <Flex className='navbar_ranking_right'>
                <span className='iconfont icon-sousuo'/>
                <span className='iconfont icon-gengduo'/>
            </Flex>
        </Flex>
    )
    
    return (
        <NavBarModule navbarInsert={navbarInsert} navBarObj={{height:'50px',changeBefore:'transparent',changeAfter:props.navBarBgColor}}/>
    )
}
